

import React, { useState } from 'react';
import { View, Button, StyleSheet, Text } from 'react-native';
import { ScreenDemo as BasicScreenDemo } from './test/ScreensTest';
import { ScreenDemo as StackScreenDemo } from './demo/testDemo/index';

export const ScreensApp = () => {
  const [selectedDemo, setSelectedDemo] = useState<string | null>(null);

  const renderDemo = () => {
    if (selectedDemo === 'basic') {
      return <BasicScreenDemo />;
    } else if (selectedDemo === 'stack') {
      return <StackScreenDemo />;
    }
    
  return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Text style={styles.description}>ScreensTestDemo演示</Text>
          <Button
            title="ScreensTestDemo"
            onPress={() => setSelectedDemo('basic')}
          />
        </View>
        <View style={styles.buttonContainer}>
          <Text style={styles.description}>react-native-oh-tpl/react-native-screens库结合react-native-oh-tpl/stack库页面跳转到第三界面之后，保持第一个界面不会触发刷新Demo演示</Text>
          <Button
            title="StackScreensDemo"
            onPress={() => setSelectedDemo('stack')}
          />
        </View>
      </View>
    );
  };

  return renderDemo();
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  description: {
    fontSize: 16,
    marginBottom: 30,
    textAlign: 'center',
  },
  buttonContainer: {
    width: '80%',
    marginBottom: 20,
  },
  backButton: {
    marginTop: 40,
  },
});

export const displayName = 'react-native-screens';
export const framework = 'React';
export const category = 'basic';
export const title = 'react-native-screens';
export const documentationURL = 'https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-screens.md';
export const description = 'react-native-screens';

export const examples = [
  {
    title: 'react-native-screens',
    render: function (): any {
      return <ScreensApp />;
    },
  },
];

